<template>
  <div class="modify-password">
    <div class="top">修改密码</div>
    <div class="bottom">
      <el-form ref="form" :model="form" style="width: 400px" label-width="100px">
        <el-form-item label="原密码">
          <el-input v-model="form.old_pwd" size="medium" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.new_pwd" size="medium" show-password />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.confirm_pwd" size="medium" show-password />
        </el-form-item>
        <el-form-item>
          <el-button @click="changePsd">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { changePsd } from "@/api/http/account";
export default {
  data() {
    return {
      form: {
        old_pwd: ""
      }
    };
  },
  created() {},
  methods: {
    // 修改密码
    changePsd() {
      if (!this.form.old_pwd) {
        this.$message("请填写原密码");
        return;
      }
      if (!this.form.new_pwd) {
        this.$message("请填写新密码");
        return;
      }
      if (!this.form.confirm_pwd) {
        this.$message("请确认密码");
        return;
      }
      if (this.form.confirm_pwd != this.form.new_pwd) {
        this.$message("两次密码输入不一致");
        return;
      }
      changePsd(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.top {
  line-height: 40px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
</style>
